<template>
  <common-card title="今日交易用户数" value="888,000">
    <template>
      <div
        id="today-users-chart"
        :style="{ width: '100%', height: '100%' }"
      ></div>
    </template>
    <template #footer>
      <span>退货率 </span>
      <span class="emphasis">5.14%</span>
    </template>
  </common-card>
</template>
<script>
import cardMixin from '../../mixins/cardMixin'
export default {
  name: 'TodayUser',
  mixins: [cardMixin],
  mounted() {
    const chartDom = document.getElementById('today-users-chart')
    const chart = this.$echarts.init(chartDom)
    chart.setOption({
      color: ['#3398DB'], // 图形颜色（柱状颜色）
      xAxis: {
        type: 'category',
        show: false
      },
      yAxis: { show: false },
      grid: {
        top: 0,
        bottom: 0,
        left: 0,
        right: 0
      },
      series: [
        {
          type: 'bar',
          data: [
            410, 82, 200, 334, 390, 333, 220, 150, 82, 220, 134, 290, 330, 150
          ],
          barWidth: '60%' // 柱状图宽度
        }
      ]
    })
  }
}
</script>
